<template>
  <div>
    <a-card title="我的发表" :bordered="false">
      <z-crud
        @on-load="loadData"
        :page="page"
        :option="option"
        :table-loading="loading"
        :data="list"
        @on-selection="onSelection"
        @on-save="onSave"
        @on-del="onDel"
        @on-update="onUpdate"
      >
        <template #postContent="{ record }">
          <router-link :to="'/article/' + record.id">
            <a-button type="link">原文链接</a-button>
          </router-link>
        </template>

        <template #isPublic="{ record }">
          <a-tag color="success" v-if="record.isPublic">已公开</a-tag>
          <a-tag color="warning" v-else>未公开</a-tag>
        </template>

        <!-- <template #post_contentForm="{ record }">
          <tiny
            :width="'100%'"
            v-model:myValue="record.post_content"
            :height="667"
            :url="'图片路径'"
            ref="tinymce"
            :slotStyle="{
              display: 'flex',
              justifyContent: 'center',
              padding: '10px 0 0',
            }"
          >
          </tiny>
        </template>-->
      </z-crud>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, h } from "vue";
import {
  getUserPostList,
  publicPost,
  deletePost,
  updatePost,
} from "@/api/admin";
import tiny from "@/components/tiny.vue";
import zCrud from "@/components/z-crud.vue";
import { message } from "ant-design-vue";
interface pageState {
  pageSize: number;
  currentPage: number;
  total: number;
}
export default defineComponent({
  components: { zCrud, tiny },
  setup() {
    const page = ref<pageState>({
      pageSize: 5,
      currentPage: 1,
      total: 0,
    });
    const myValue = ref<string>("");
    const option = ref<object>({
      // addBtn:true,
      refreshBtn: true,
      selection: true,
      bordered: true,
      operation: true,
      editBtn: true,
      addBtn: true,
      delBtn: true,
      modalWidth: "60%",
      // labelSpan: 6,
      column: [
        {
          title: "标题",
          dataIndex: "postTitle",
          key: "postTitle",
          align: 'left',
          search: true,
       
          rules: [
            {
              required: true,
              message: "请填写标题",
              trigger: "blur"
            },
          ],
        },
        {
          title: "内容",

          dataIndex: "postContent",
          type: "richText",
          key: "postContent",
          slot: true,
        },
        {
          title: "浏览量",
          dataIndex: "postViews",
          display: false,
          key: "postViews",
        },
        {
          title: "点赞数",
          dataIndex: "post_like_count",
          display: false,
          key: "post_like_count",
        },
        {
          title: "是否公开",
          dataIndex: "isPublic",
          type: "switch",
          dicData:[
            {
              value:1,
              label:"公开"
            },
            {
              value:0,
              label:"不公开"
            }
          ],
          key: "isPublic",
          
          slot: true,
        },
        {
          title: "发布日期",
          dataIndex: "postDate",
          key: "postDate",
          display: false,
          search: true,
        },
        {
          title: "编辑日期",
          dataIndex: "updateDate",
          key: "updateDate",
          display: false,
        },
      ],
    });

    const list = ref<object[]>([]);
    const loading = ref<boolean>(false);

    const onSelection = (selection: object[]) => {
      console.log("选中的数据=----", selection);
    };
    const onSave = async (params, done) => {
      params.isPublic = +params.isPublic;
      publicPost(params).then((res) => {
        message.success("操作成功");
        done();
        loadData(page.value);
      });
    };
    const onUpdate = async (params, done) => {
      params.isPublic = +params.isPublic;
      updatePost(params).then((res) => {
        message.success("操作成功");
        done();
        loadData(page.value);
      });
    };
    const loadData = async (page) => {
      loading.value = true;
      getUserPostList({
        page_size: page.pageSize,
        current_page: page.currentPage,
      })
        .then(({ data }) => {
          loading.value = false;
          // for (const item of data.data) {
          //   item.isPublic = Boolean(item.isPublic);
          // }

          list.value = data.data;
          page.total = data.count;
        })
        .catch((res) => (loading.value = false));
    };

    const onDel = async (record, done) => {
      deletePost(record.id).then((res) => {
        message.success("操作成功");
        done();
        loadData(page.value);
      });
    };
    return {
      loadData,
      page,
      option,
      loading,
      list,
      onSelection,
      myValue,
      onSave,
      onDel,
      onUpdate,
    };
  },
});
</script>

<style lang="less" scoped>
</style>